<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app" class="root">
    <div>{{pmsg}}</div>
    <menu-item title="来自父组件固定的值"></menu-item>
    <menu-item :title="ptitle" content="静态内容"></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      父组件向子组件传值:
      1. 组件内部通过props接收传递过来的值
        Vue.component('menu-item',{
          props:['title'],
          template:`<div>{{title}}</div>`
        })
      2. 父组件通过属性将值传递给子组件 
        <menu-item title="来自父组件的值"></menu-item> => 写死的值
        <menu-item :title="title"></menu-item> => 动态绑定
    */
    
    Vue.component('menu-item',{
      props:['title','content'],
      data:function(){
        return {
          msg:"子组件本身的数据"
        }
      },
      template:`<div>{{msg + '---'+ title + '---' + content}}</div>`
      
    });
    
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中的内容',
        ptitle:"父组件中动态传递的数据"
      }
    });
  </script>
</body>
</html>
